﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Hotspot.ascx.cs" Inherits="Hotspot" %>
<div class="hotspot-container">
    <div id="skip-modal" class="modal hide bs-example-modal-sm" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-l">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×</button>
                    <h3 id="myModalLabel">
                        Hotspot <small></small></h3>
                    <span class="sub-title"></span>
                </div>
                <div class="modal-body">
                    <div>
                        List top 3 flow items that exceeds the selected percentage of total impact
                    </div>
                    <div class="slider-wrapper">
                        <span class="title"><strong>Percentage</strong></span>
                        <input id="slider_hotspot" type="text" class="slider" value="" data-slider-min="0"
                            data-slider-max="100" data-slider-step="1" data-slider-value="30" data-slider-orientation="horizontal"
                            data-slider-handle="round" data-slider-tooltip="hide" />
                    </div>
                    <div class="tableContents">
                        <table id="gridHotspot" class="table table-condensed">
                            <thead>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    var slider = null;

    function loadHotspotModal(factorId, impact) {

        hotspots.initData(factorId, impact);

        $('#skip-modal .modal-header span.sub-title').text(hotspots.getFactorName());

        loadHotspotData(null);


        // show it, so it can get the height value
        $('#skip-modal').show();

        if (slider == null) {
            slider = $('input#slider_hotspot').slider({})
            .on('slideStop', function (ev) {
                var percent = ev.value / 100;
                loadHotspotData(percent);
            });
        }
        
        var top = ($(window).outerHeight() / 2) - ($('#skip-modal .modal-dialog').outerHeight() / 2);

        $('#skip-modal .modal-dialog').css('top', top + 'px');

        // Prevent click on black area to close
        $("#skip-modal").modal({});



    }


    function loadHotspotData(percent) {
        if (!percent) {
            if (slider) {
                percent = slider[0].value / 100;
            }
        }

        console.log('percent: ' + percent);

        var rows = hotspots.getHotspotDetails(percent);
        // Rank, Item, Impact, Source

        $('.hotspot-container .tableContents table#gridHotspot').empty();
        $('.hotspot-container .tableContents table#gridHotspot').dataTable({
            "bProcessing": false,
            "bDestroy": true,
            "bPaginate": false,
            "bAutoWidth": false,
            "bFilter": false,
            "bInfo": false,
            "aaSorting": [],
            "aaData": rows,
            "aoColumns": [

                    { "mDataProp": "Rank", "bSortable": true, "sTitle": "Rank", "sClass": "cRank", "bSearchable": true, "bVisible": true },
                    { "mDataProp": null, "bSortable": true, "sTitle": "Item", "sClass": "cItem", "sDefaultContent": "<a class='lnkItem'></a>", "bVisible": true },
                    { "mDataProp": "Emission", "bSortable": true, "sTitle": "Impact", "sClass": "cImpact", "bSearchable": true, "bVisible": true },
                    { "mDataProp": "Source", "bSortable": true, "sTitle": "Source", "sClass": "cSource", "bSearchable": true, "bVisible": true }
                ],
            "fnCreatedRow": function (nRow, aData, iDataIndex) {
                $("a.lnkItem", nRow).attr('href', aData.ItemUrl);
                $("a.lnkItem", nRow).attr('target', '_blank');
                $("a.lnkItem", nRow).text('('+aData.ItemType+') '+aData.ItemName);
            },
            "fnInitComplete": function (oSettings, json) {

            }

        });
    }

</script>